<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现搜索框样式的点击修改</title>
		<style>
			input {
				padding: 10px 20px;
				border: 1px solid #c81623;
				outline: none;
				
			}
			input::placeholder {
				color: blue;
			}
			.change::placeholder {
				color: red;
			}
			
		</style>
	</head>
	<body>
		<input type="text" placeholder="我是提示信息">
		<script>
			var inputBtn = document.querySelector('input');
			// 获取焦点事件
			inputBtn.onfocus = function(){
				// 补充知识点，修改行内样式表的方式
				// this.style.color = 'yellow';
				this.className = 'change';
			}
			
			// 失去焦点
			inputBtn.onblur = function(){
				this.className = '';
			}
		</script>
		
	</body>
</html>